<template>
	<view class="content">
		<u-navbar
			title="常见问题" 
			:bg-color="`${mainColor}`" 
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"
			/>
		<view class="list" :style="{height: `calc(100vh - ${navHeight}px)`}" v-if="data">
			<view class="empty-box" v-if="data.length == 0">
				<u-empty mode="message" text="没有问题"></u-empty>
			</view>
			<u-list v-else @scrolltolower="loadMore" :height="`calc(100vh - ${navHeight}px)`">
				<u-cell-group>
					<u-cell
						    size="large"
						    :title="`${index+1}. ${item.title}`"
						    isLink
							@click="clickItem(item)"
							 v-for="(item, index) in data" :key="index"
							 titleStyle="font-weight: bold; font-size: 14px;"
						></u-cell>
				</u-cell-group>
			  <u-loadmore :status="status" icon line v-if="status != 'nomore'"/>
			  <view style="height: 10px;"></view>
			</u-list>
		</view>
	</view>
</template>

<script>
	import { getFaqList } from '@/api';
	import { systemInfo } from '@/utils/mixin';

	export default {
		mixins: [systemInfo],
		data() {
			return {
				data: [],
				page: 1,
				hasMore: false,
				status: 'loadmore'
			}
		},
		onLoad() {
			this.getSystemInfo();
			this.loadFaqList();
		},
		onPullDownRefresh() {
			this.loadFaqList();
		},
		methods: {
			async loadFaqList() {
				if (this.$store.state.onlineAudit) {
					uni.stopPullDownRefresh();
					return;
				}
				
				this.page = 1;
				const res = await getFaqList(this.page);
				this.data = res.data;
				this.hasMore = res.is_next;
				this.status = res.is_next ? 'loadmore' : 'nomore';
				
				uni.stopPullDownRefresh();
			},
			async loadMore() {
				if (this.status != 'loading' && this.hasMore) {
					this.page += 1;
					this.status = 'loading';
					const res = await getFaqList(this.selection.status, this.page);
					this.data = this.data.concat(res.data);
					this.hasMore = res.is_next;
					this.status = res.is_next ? 'loadmore' : 'nomore';
				}
			},
			clickItem(item) {
				uni.navigateTo({
					url:`/pages/faq/detail?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.list {	
	.empty-box {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
}
</style>
